@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义样式 */
@layer base {
  body {
    @apply text-white font-sans;
  }
}

/* 禁用选择和拖拽 */
canvas {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* 移动端优化 */
@media (max-width: 1023px) {
  /* 防止页面滚动 - 兼容Safari */
  html, body {
    overflow: hidden;
    position: fixed;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* 动态视口高度，兼容Safari */
    max-height: 100dvh; /* 防止iOS Safari URL栏问题 */
    margin: 0;
    padding: 0;
    min-height: calc(100vh + 100px); /* 强制隐藏URL栏 */
  }

  /* 游戏容器全屏 */
  .game-container {
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px); /* 兼容Safari */
    /* 确保内容不会被iOS Safari的UI遮挡 */
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* 底部控制区域 */
  .game-container > div:last-child {
    /* 确保控制区域始终可见 */
    position: relative;
    z-index: 100;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  /* 优化触摸按钮 */
  button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* 防止双击缩放 */
  * {
    touch-action: manipulation;
  }

  /* Safari特殊处理 */
  @supports (-webkit-touch-callout: none) {
    .game-container {
      height: calc(100vh - 60px);
      min-height: calc(100vh - 60px);
    }
  }
}

/* 虚拟按键动画效果 */
.virtual-button {
  transition: all 0.15s ease;
  transform: scale(1);
}

.virtual-button:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* iOS设备上的额外修复 */
@supports (-webkit-touch-callout: none) {
  /* 强制隐藏iOS Safari URL栏 */
  html, body {
    height: 100%;
    height: -webkit-fill-available;
    position: fixed;
    width: 100%;
    overflow: hidden;
  }

  /* 确保游戏容器正确填充 */
  .game-container {
    height: calc(100vh - 80px) !important;
    height: calc(100dvh - 80px) !important;
    max-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  /* 底部控制区域的iOS特定处理 */
  .ios-safe-area {
    padding-bottom: max(env(safe-area-inset-bottom), 20px) !important;
    position: relative;
    z-index: 1000;
  }

  /* iOS Safari底部栏修复 - 确保控制按钮可见 */
  .game-container > div:last-child {
    padding-bottom: max(60px, env(safe-area-inset-bottom)) !important;
    margin-bottom: env(safe-area-inset-bottom, 0px) !important;
    min-height: 140px;
    position: relative !important;
    z-index: 1000 !important;
    background: linear-gradient(to bottom, rgba(31, 41, 55, 0.9), rgba(31, 41, 55, 1));
    border-top: 2px solid rgba(75, 85, 99, 0.8);
  }

  /* iOS虚拟按钮优化 */
  .virtual-button {
    min-height: 48px; /* 增大触摸目标 */
    min-width: 48px;
    position: relative;
    z-index: 1001;
  }

  /* 极端iOS Safari底部导航栏遮挡修复 */
  @media screen and (orientation: portrait) {
    .game-container {
      height: calc(100vh - 100px) !important;
      height: calc(100dvh - 100px) !important;
    }

    .game-container > div:last-child {
      padding-bottom: max(80px, env(safe-area-inset-bottom)) !important;
      margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
      min-height: 160px !important;
    }

    /* 游戏板区域调整 */
    .game-container > div:first-child {
      margin-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.5) !important;
    }
  }

  /* 横屏模式优化 */
  @media screen and (orientation: landscape) {
    .game-container {
      height: calc(100vh - 60px) !important;
      height: calc(100dvh - 60px) !important;
    }

    .game-container > div:last-child {
      padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
    }
  }

  /* iOS Safari特定的视口高度修复 */
  @supports (-webkit-appearance: none) {
    .game-container {
      height: -webkit-fill-available !important;
      height: 100vh !important;
      padding-top: 60px;
      padding-bottom: 120px;
      box-sizing: border-box;
    }
  }
}

/* iOS 15+ 特定修复 */
@supports (padding: max(0px)) {
  .game-container > div:last-child {
    padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
  }
}

/* 最终iOS Safari解决方案 - 固定定位底部控制区域 */
@supports (-webkit-touch-callout: none) {
  /* 移动端底部控制区域固定定位 */
  .lg-hidden .game-container > div:last-child {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: linear-gradient(to bottom, rgba(17, 24, 39, 0.98), rgba(17, 24, 39, 1)) !important;
    border-top: 2px solid rgba(75, 85, 99, 0.8) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    padding-top: 20px !important;
    height: auto !important;
    min-height: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    backdrop-filter: blur(10px) !important;
  }

  /* 游戏板区域调整，为固定底部控制区域留出空间 */
  .lg-hidden .game-container > div:first-child {
    margin-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 20px !important;
  }

  /* 主游戏容器调整 */
  .lg-hidden .game-container {
    height: calc(100vh - 60px) !important;
    height: calc(100dvh - 60px) !important;
    padding-bottom: 0 !important;
  }

  /* iOS特定视口修复 */
  @supports (-webkit-appearance: none) {
    html, body {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .lg-hidden .game-container {
      height: calc(100vh - 60px) !important;
      height: -webkit-fill-available !important;
      position: relative;
    }
  }

  /* Safari浏览器特定的额外修复 */
  @supports not (-webkit-appearance: none) {
    _::-webkit-full-page-media, _:future {
      .lg-hidden .game-container > div:last-child {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px) !important;
      }
    }
  }

  /* 强制隐藏Safari URL栏的终极方案 */
  html, body {
    /* 设置最小高度强制触发全屏模式 */
    min-height: calc(100vh + 100px);
    height: calc(100vh + 100px);
    position: relative;
    overflow: hidden;
  }

  /* 创建一个隐藏的滚动容器 */
  body::before {
    content: '';
    display: block;
    height: 1px;
    width: 1px;
    background: transparent;
    position: absolute;
    top: -1px;
    left: 0;
    visibility: hidden;
  }

  /* 强制页面滚动 */
  body {
    scroll-behavior: smooth;
  }

  /* 在Safari中强制隐藏URL栏 */
  @supports (-webkit-touch-callout: none) {
    html {
      height: 100vh;
      height: -webkit-fill-available;
      position: fixed;
      width: 100%;
      overflow: hidden;
    }

    body {
      height: 100vh;
      height: -webkit-fill-available;
      position: fixed;
      width: 100%;
      overflow: hidden;
      padding-top: 1px;
      margin-top: -1px;
    }
  }
}
